@charset "utf-8";
body { 
    display: grid;
    grid-template-areas: 
      "header header"
      "article nav"
      "footer footer";
    grid-template-rows: 10% 1fr 15%;  
    grid-template-columns: 1fr 20%;
    grid-row-gap: 10px;
    grid-column-gap: 10px;
    height: 100vh;
    margin: 0;
    }  
  header, footer, article, nav {
    padding: 1.2em;
    background: aliceblue;
    }
    #header {
        grid-area: header;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        }
  #pageFooter {
    grid-area: footer;
    }
  #article { 
    grid-area: article;  
    display: flex;
    flex-wrap: wrap;  
    flex-direction: row;  
    }
    .video-title{
        display: flex;
        flex-direction: column;
        width: 33%;
      }
    .img-video{
        width: 50%;
      }
  #mainNav { 
    grid-area: nav; 
    }
  #siteAds { 
    grid-area: ads; 
    } 
#footer {
  grid-area: footer;
  }
  #footer>ul{
  list-style: none;
  }
  #footer>ul>li{
    float: left;
    margin-left: 10px;
  }
  /* Stack the layout on small devices/viewports. */
  @media all and (max-width: 575px) {
    body { 
      grid-template-areas: 
        "header"
        "article"
        "ads"
        "nav"
        "footer";
      grid-template-rows: 10% 1fr 70px 1fr 17%;  
      grid-template-columns: 1fr;
   }
  }